<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

</body>
<script>
    /* 
        1、客户端连接到Web服务器
    一个HTTP客户端，通常是浏览器，与Web服务器的HTTP端口（默认为80）建立一个TCP套接字连接。例如，http://www.oakcms.cn。
    
    2、发送HTTP请求
    通过TCP套接字，客户端向Web服务器发送一个文本的请求报文，一个请求报文由请求行、请求头部、空行和请求数据4部分组成。
    
    3、服务器接受请求并返回HTTP响应
    Web服务器解析请求，定位请求资源。服务器将资源复本写到TCP套接字，由客户端读取。一个响应由状态行、响应头部、空行和响应数据4部分组成。
    
    4、释放连接TCP连接
    若connection 模式为close，则服务器主动关闭TCP连接，客户端被动关闭连接，释放TCP连接;若connection 模式为keepalive，则该连接会保持一段时间，在该时间内可以继续接收请求;
    
    5、客户端浏览器解析HTML内容
    客户端浏览器首先解析状态行，查看表明请求是否成功的状态代码。然后解析每一个响应头，响应头告知以下为若干字节的HTML文档和文档的字符集。客户端浏览器读取响应数据HTML，根据HTML的语法对其进行格式化，并在浏览器窗口中显示。
    

    http的状态码
    1xx：指示信息--表示请求已接收，继续处理
    2xx：成功--表示请求已被成功接收、理解、接受
    3xx：重定向--要完成请求必须进行更进一步的操作
    4xx：客户端错误--请求有语法错误或请求无法实现
    5xx：服务器端错误--服务器未能实现合法的请求

    */

    var req = new XMLHttpRequest(); // 创建请求对象 目的建立一个TCP连接 （目的是为了建立，并不能立马建立）
    console.log(req.readyState);  //0  未初始化 需要等到open  才可以

    // open(type,url,flag);  
    // type : get/post   url:请求的路径(本地的路径,服务器接口)   
    // flag  true 代表异步(默认)  false 代表同步(已经说要废弃 不建议使用)  
    req.open("get", "data/1.txt?user=www", true);
    console.log(req.readyState);  // 1  正在加载  已经和服务器建立链接

    req.send();
    console.log(req.readyState);

    req.onreadystatechange = function () { // 监听请求状态(req.readyState) 的变化
        // 2. 加载成功  服务器接收header信息
        // 3. 交互      服务器接收主体信息（数据 user=www）
        // 4. 完成      服务器响应  (返还需要的 状态(http状态),相应返还数据) 
        console.log("readyState的状态变化：", req.readyState);
        //  req.readyState  请求对象的状态  
        if (req.readyState == 4 && req.status == 200) {
            console.log(req);
            var result = req.responseText;// 
            console.log(result);  //"我是演示的文本"
            document.body.innerText = result;
        }


    }








</script>

</html>